import React from 'react'
import { sleep } from 'antd-mobile/es/utils/sleep'
import Menu from '@/views/Menu'

import '@/assets/css/OrderIndex.scoped.css'

const Component = () =>
{
  let [active, SetActive] = useState('all')
  let [page, SetPage] = useState(1)
  let [list, SetList] = useState([
    {
      id: 1,
      name: '酒店特价房',
      status_text: '待支付',
      thumb_text: require('@/assets/images/hotel1.jpg'),
      price: '12'
    },
    {
      id: 2,
      name: '酒店特价房',
      status_text: '待支付',
      thumb_text: require('@/assets/images/hotel1.jpg'),
      price: '12'
    },
    {
      id: 3,
      name: '酒店特价房',
      status_text: '待支付',
      thumb_text: require('@/assets/images/hotel1.jpg'),
      price: '12'
    },
    {
      id: 4,
      name: '酒店特价房',
      status_text: '待支付',
      thumb_text: require('@/assets/images/hotel1.jpg'),
      price: '12'
    },
    {
      id: 5,
      name: '酒店特价房',
      status_text: '待支付',
      thumb_text: require('@/assets/images/hotel1.jpg'),
      price: '12'
    },
  ])
  let [hasMore, SethasMore] = useState(false)
  let ref = React.useRef(null)

  //选项卡切换
  const TabChange = async (key: string) => SetActive(key)

  //下拉刷新
  const onRefresh = async () =>
  {
    SetPage(1)
    SethasMore(false)
  }

  //上拉加载
  const loadMore = async () =>
  {
    await sleep(1000)
    SethasMore(false)
  }

  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部订单" key="all" />
        <React.UI.Tabs.Tab title="待评价" key="0" />
        <React.UI.Tabs.Tab title="退款" key="1" />
      </React.UI.Tabs>
      
      {/* 下拉列表 */}
      <React.UI.PullToRefresh onRefresh={onRefresh}>
        {/* 订单列表 */}
        <div className='order_list'>
          {list && list.map((item:any, key:number) => 
              <div className="item" key={key}>
                  <div className="item_top">
                      <p>{item.name}</p>
                      <div className="top_tag">{item.status_text}</div>
                  </div>

                  <div className="house">
                      <div className="item_swipers">
                          <img src={item.thumb_text} />
                      </div>
                      <div className="item_mask">订单实付：￥{item.price}</div>
                  </div>

                  <div className="item_bar">
                    <div className='time'>2024-07-06</div>
                    <div className='action'>
                      <React.UI.Button color='success' size='small' onClick={() => React.navigate(`/order/comment?orderid=${item.id}`)}>立即评价</React.UI.Button>
                      <React.UI.Button color='warning' size='small' onClick={() => React.navigate(`/order/info?orderid=${item.id}`)}>查看详情</React.UI.Button>
                    </div>
                  </div>
              </div>
          )}
        </div>
        
        {/* 上拉加载 */}
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
      </React.UI.PullToRefresh>

      <Menu />
    </>
  )
}

export default Component